// react入口 =》vue入口main.js
import React from 'react'
import ReactDOM from 'react-dom'

/**
 * jsx中使用js表达式（vue中的差值{{data}}）
 * 语法：{data}
 * 1. 简单类型
 * 2. 复杂类型(引用类型)
 * 说明: jsx本身也是一个js表达式
 * 注意：
 * 1. 不能绑定渲染对象
 * 2. 绑定渲染函数
 */
const str = 'hi jsx'
let bool = true
let num = 0

let obj = {
  name: '王红磊',
  age: 18
}

let arr = [1, 2, 3]

let fn = () => {
  return 123
}

const div = (
  <div>
    <h2>我是div</h2>
  </div>
)

const box = (
  <ul>
    <li>{str}</li>
    <li>{bool}</li>
    <li>{num + 1}</li>
    <li>{20 * 10}</li>
    <li>
      {obj.name}:{obj.age}
    </li>
    <li>{arr[1]}</li>
    <li>{fn()}</li>
    <li>{[1, 2, 3].join('@')}</li>
    {/* jsx注释：特殊用法 */}
    <li>{<h1>hi jsx!!!</h1>}</li>
    <li>{div}</li>
  </ul>
)

ReactDOM.render(box, document.getElementById('root'))
